<template>
  <scroll-view scroll-x scroll-y :style="getContentWidth()">
    <!--  这边是登录  -->
    <view>
      <view class="login-image-container">
        <image :src="logo" style="width: 128px; height: 128px"/>
      </view>

<!--      <u&#45;&#45;text text="ARCUS" align="center" size="28"></u&#45;&#45;text>-->

      <view class="login-content-container">
        <view class="login-content-action" v-if="judgeComponentType('login')">
          <u--text :text="language.login" type="info" size="12"></u--text>
          <u--text
              :text="language.register" type="primary"
              size="10" align="right" style="cursor: pointer"
              @click="changeComponentType('register')"
          ></u--text>
        </view>
        <view class="login-content-action" v-if="judgeComponentType('register')">
          <u--text
              :text="language.login" type="primary"
              size="12" style="cursor: pointer" @click="changeComponentType('login')"
          ></u--text>
          <u--text :text="language.register" type="info" size="10" align="right"></u--text>
        </view>
        <view class="login-content-action" v-if="judgeComponentType('forget') || judgeComponentType('forget_reset')">
          <u--text
              :text="language.login" type="primary"
              size="12" style="cursor: pointer" @click="changeComponentType('login')"
          ></u--text>
          <u--text
              :text="language.register" type="primary"
              size="10" align="right" style="cursor: pointer"
              @click="changeComponentType('register')"
          ></u--text>
        </view>

        <view class="login-content-item">
          <u--input :placeholder="language.userName" prefixIcon="account-fill" v-model="pageData.uName"></u--input>
        </view>
        <view class="login-content-item" v-if="judgeComponentType('login') || judgeComponentType('register')">
          <u-input :placeholder="language.userPasswd" prefixIcon="lock" v-model="pageData.uPwd"></u-input>
        </view>
        <view class="login-content-item" v-if="judgeComponentType('register')">
          <u-input :placeholder="language.userPasswdAgain" prefixIcon="lock" v-model="pageData.uPwdAgain"></u-input>
        </view>
        <view class="login-content-item" v-if="judgeComponentType('register')">
          <u-input :placeholder="language.userEmail" prefixIcon="email" v-model="pageData.uEmail"></u-input>
        </view>
        <view class="login-content-item" v-if="judgeComponentType('forget_reset')">
          <u-input :placeholder="language.userChangePasswd" prefixIcon="lock" v-model="pageData.uChangePwd"></u-input>
        </view>
        <view class="login-content-item" v-if="judgeComponentType('forget_reset')">
          <u-input :placeholder="language.userResetCode" prefixIcon="email" v-model="pageData.uResetCode"></u-input>
        </view>

        <view class="login-content-action">
          <u--text
              :text="language.forget" type="info" size="10" align="right"
              v-if="judgeComponentType('forget') || judgeComponentType('forget_reset')"
          ></u--text>
          <u--text
              :text="language.forget" type="primary" size="10" align="right"
              style="cursor: pointer" v-else
              @click="changeComponentType('forget')"
          ></u--text>
        </view>

        <u-button
            v-if="judgeComponentType('login')"
            type="primary" :text="language.confirm"
            @click="confirmClick" :loading="componentStatus.confirmLoading"
            :disabled="componentStatus.confirmDisable"
        ></u-button>
        <u-button
            v-if="judgeComponentType('register')"
            type="primary" :text="language.RegisterButton"
            @click="confirmClick" :loading="componentStatus.confirmLoading"
            :disabled="componentStatus.confirmDisable"
        ></u-button>
        <u-button
            v-if="judgeComponentType('forget')"
            type="primary" :text="language.forgetButton"
            @click="confirmClick" :loading="componentStatus.confirmLoading"
            :disabled="componentStatus.confirmDisable"
        ></u-button>
        <u-button
            v-if="judgeComponentType('forget_reset')"
            type="primary" :text="language.forgetResetButton"
            @click="confirmClick" :loading="componentStatus.confirmLoading"
            :disabled="componentStatus.confirmDisable"
        ></u-button>
      </view>

      <view style="display: flex; justify-content: space-between">
        <view :style="getTipsStyle()" v-if="judgeComponentType('login')">
          <!--        <u&#45;&#45;text text="测试版本别空着就行" type="info" size="12"></u&#45;&#45;text>-->
          <!-- 测试的时候打开，平时关闭 -->
          <!--          <u&#45;&#45;text :text="language.initUser + '协和眼科'" type="info" size="12"></u&#45;&#45;text>-->
          <!--          <u&#45;&#45;text :text="language.initPasswd + 'imed1234'" type="info" size="12"></u&#45;&#45;text>-->
        </view>
        <view v-else :style="getTipsStyle()"></view>
        <view :style="getTipsStyle()">
          <img src="@/static/chang.png" style="width: 30px; height: 30px; margin-right: 5px; margin-left: 5px" @click="changeLanguage">
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import statusJudge from "../../utils/monitor/statusJudge";
import calLoginPage from "../../utils/winCal/modules/calLoginPage";
import appConfig from "../../api/appConfig";
import {mapActions, mapState} from "vuex";
import language from "../../api/language";
import middleWareService from "../../api/modules/middleWareService";
import SegRightButton from "../seg-right-button/seg-right-button";

export default {
  name: "segLoginDetail",
  components: {SegRightButton},
  mixins: [statusJudge, calLoginPage],
  computed: {
    ...mapState('app', ['nowLanguage'])
  },
  watch: {
    nowLanguage(newVal, oldVal) {
      this.getTranslateWithAll(newVal)
    }
  },
  data() {
    return {
      logo: '/static/logo.png',
      mode: appConfig.calMode,
      componentType: 'login',  // login/register
      language: {},
      pageData: {
        uName: '',
        uPwd: '',
        uPwdAgain: '',
        uEmail: '',
        uChangePwd: '',
        uResetCode: ''
      },
      componentStatus: {
        confirmLoading: false,
        confirmDisable: false
      }
    }
  },
  mounted() {
    this.getTranslateWithAll(this.nowLanguage)
  },
  methods: {
    ...mapActions({
      setUserInfo: 'user/setUserInfo',
      setLanguage: 'app/setNowLanguage',
      setRouteValue: 'route/setRouteValue',
      setUserHasLogin: 'user/setUserHasLogin'
    }),
    validateCode(s){
      //检测是否存在特殊字符
      let containSpecial = RegExp(/[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/);
      return containSpecial.test(s)
    },

    changeLanguage(){
      if (this.nowLanguage === 'CHI'){
        this.setLanguage('ENG')
      }else{
        this.setLanguage('CHI')
      }
    },
    pwdLoginWithMask() {
      // 虚假的登录，跑通系统用的
      this.changeConfirmButtonStatus(false)
      if (this.isEmpty(this.pageData.uName) || this.isEmpty(this.pageData.uPwd)) {
        uni.showModal({
          title: "Error",
          content: this.language.loginError1,
          showCancel: false
        })
      } else {
        uni.redirectTo({
          url: '/pages/arcusmain/arcusmain',
          fail: () => {
            modal.redirectErrorModal('arcusmain')
          }
        })
      }
      this.changeConfirmButtonStatus(true)

    },

    isEmpty(value) {
      return value === '' || value === undefined
    },
    changeConfirmButtonStatus(usable) {
      if (usable) {
        this.componentStatus.confirmLoading = false
        this.componentStatus.confirmDisable = false
      } else {
        this.componentStatus.confirmLoading = true
        this.componentStatus.confirmDisable = true
      }
    },
    // 登录方法
    async handleLogin() {
      this.changeConfirmButtonStatus(false)
      if (this.isEmpty(this.pageData.uName) || this.isEmpty(this.pageData.uPwd)) {
        uni.showModal({
          title: "Error",
          content: this.language.loginError1,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      } else {
        this.pwdLogin()
      }
    },
    // 密码登录
    async pwdLogin() {
      let name = this.pageData.uName
      let password = this.pageData.uPwd

      const fail = (res) => {
        let msg = res.data.msg
        uni.showModal({
          title: "Error",
          content: msg,
          showCancel: false
        })

        this.changeConfirmButtonStatus(true)
      }

      const success = (res) => {
        if (res.data.code === 200) {
          this.setRouteValue('/')
          this.setUserHasLogin(true)
          this.setUserInfo({
            userName: name,
            userMiddleWareToken: res.data.token
          })
          uni.redirectTo({
            url: '/pages/arcusmain/arcusmain',
            fail: () => {
              modal.redirectErrorModal('arcusmain')
            }
          })
        } else {
          fail(res)
        }

        this.changeConfirmButtonStatus(true)
      }

      middleWareService.userLogin(name, password, success, fail)
    },

    //注册方法
    async handleRegister() {
      this.changeConfirmButtonStatus(false)
      if (this.isEmpty(this.pageData.uName) || this.isEmpty(this.pageData.uPwd)) {
        uni.showModal({
          title: "Error",
          content: this.language.loginError1,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      }else if(this.validateCode(this.pageData.uName) || this.validateCode(this.pageData.uPwd)){
        uni.showModal({
          title: "Error",
          content: this.language.loginError8,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      } else if (this.pageData.uPwd !== this.pageData.uPwdAgain) {
        uni.showModal({
          title: "Error",
          content: this.language.loginError2,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      } else if(this.isEmpty(this.pageData.uEmail)){
        uni.showModal({
          title: "Error",
          content: this.language.loginError3,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      } else if(!this.pageData.uEmail.match(/^\w+@\w+\.\w+$/i)){
        uni.showModal({
          title: "Error",
          content: this.language.loginError4,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      } else{
        this.pwdRegister()
      }
    },
    //密码注册
    async pwdRegister() {
      let name = this.pageData.uName
      let password = this.pageData.uPwd
      let email = this.pageData.uEmail

      const fail = (res) => {
        let msg = res.data.msg
        uni.showModal({
          title: "Error",
          content: msg,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      }

      const success = (res) => {
        if (res.data.code === 200) {
          this.changeComponentType('login')
          uni.showModal({
            title: "Tips",
            content: this.language.registerSuccess,
            showCancel: false
          })
        } else {
          fail(res)
        }
        this.changeConfirmButtonStatus(true)
      }
      middleWareService.userRegister(name, password, email, success, fail)
    },

    async handleForget(){
      let name = this.pageData.uName

      this.changeConfirmButtonStatus(false)
      if (this.isEmpty(name)) {
        uni.showModal({
          title: "Error",
          content: this.language.loginError5,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      }else {
        const fail = (res) => {
          let msg = res.data.msg
          uni.showModal({
            title: "Error",
            content: msg,
            showCancel: false
          })
          this.changeConfirmButtonStatus(true)
        }
        const success = (res) => {
          if (res.data.code === 200) {
            this.changeComponentType('forget_reset')
            uni.showModal({
              title: "Tips",
              content: this.language.forgetSuccess,
              showCancel: false
            })
          } else {
            fail(res)
          }
          this.changeConfirmButtonStatus(true)
        }
        middleWareService.emailSendForgetCode(name, success, fail)
      }
    },

    async handleForgetReset(){
      let name = this.pageData.uName
      let password = this.pageData.uChangePwd
      let code = this.pageData.uResetCode

      this.changeConfirmButtonStatus(false)

      if(this.isEmpty(name) || this.isEmpty(password) || this.isEmpty(code)){
        uni.showModal({
          title: "Error",
          content: this.language.loginError6,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      }else if(password.length <= 5){
        uni.showModal({
          title: "Error",
          content: this.language.loginError7,
          showCancel: false
        })
        this.changeConfirmButtonStatus(true)
      }else {
        const fail = (res) => {
          let msg = res.data.msg
          uni.showModal({
            title: "Error",
            content: msg,
            showCancel: false
          })
          this.changeConfirmButtonStatus(true)
        }

        const success = (res) => {
          if (res.data.code === 200) {
            this.changeComponentType('login')
            uni.showModal({
              title: "Tips",
              content: this.language.resetSuccess,
              showCancel: false
            })
          } else {
            fail(res)
          }
          this.changeConfirmButtonStatus(true)
        }

        middleWareService.emailResetPassword(name, password, code, success, fail)
      }
    },

    confirmClick() {
      if (this.judgeComponentType('login')) {
        this.handleLogin()
      } else if (this.judgeComponentType('register')) {
        this.handleRegister()
      } else if (this.judgeComponentType('forget')){
        this.handleForget()
      } else if (this.judgeComponentType('forget_reset')) {
        this.handleForgetReset()
      }
    },

    judgeComponentType(mode) {
      return this.componentType === mode
    },

    changeComponentType(mode) {
      this.componentType = mode
      this.pageData = {
        uName: '',
        uPwd: '',
        uPwdAgain: ''
      }
    },

    getTranslateWithAll(lang) {
      this.language = language.segLoginDetail[lang]
    },

    getContentWidth(){
      return {
        'height': 'auto',
        'width': this.loginGroupInfo.width + 'px'
      }
    },

    getTipsStyle(needPointer = true){
      if(needPointer){
        return { 'padding': '0 15px', 'cursor': 'pointer'}
      }else{
        return { 'padding': '0 15px'}
      }
    }
  }
}
</script>

<style scoped>
.login-image-container {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 5px;
}

.login-content-container {
  margin: 20px auto;
  padding: 15px;
}

.login-content-action {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}

.login-content-item {
  margin-bottom: 20px;
}
</style>
